<template>
	<view class="item-main">
		<!-- 经营信息 -->
		<view v-if="item.id">
			<view class="item-top">
				<span class='left'>{{ item.title }}</span>
			</view>
			<view class="item-center" @click="toPage('/pages/details/shopRent/shopRent?id='+item.id)"
				style="flex-wrap: nowrap;">
				<view class="acea-row" style="flex-wrap: nowrap;">
					<img class='item-img' :src="item.shopfrontPhoto?item.shopfrontPhoto.split(',')[0]:''" alt="" v-if="item.shopfrontPhoto">
					<view class="content-main">
						<p>面积：{{ item.avea || 0 }}㎡</p>
						<p>租金：{{ item.rent || 0 }}元</p>
						<p>转让费：{{ item.transferFee || 0 }}万元</p>
						<p>适合行业：{{ item.workingGroup || "" }}</p>
					</view>
				</view>
			</view>
		</view>


		<view class="main-content" v-else>
			<view class="main-tittle acea-row row-between">
				<view class="tittle-left">
					{{ item.title || 123}}
				</view>
			</view>
			<view class="mian-center acea-row row-between"
				@click="toPage('/pages/details/askRent/askRent?'+ (item.buystoreId ? 'buystoreId=' : 'askrentId=' ) + (item.buystoreId ? item.buystoreId : item.askrentId ))">
				<view class="center-left">
					<p>面积：{{ item.area || 0 }}㎡</p>
					<p>租金：{{ item.rent || 0 }}元</p>
					<p>计划经营：{{item.categoryName || ''}}</p>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		toPage
	} from '@/filters/commFilter.js'
	export default {
		props: ['item'],
		data() {
			return {
			}
		},
		methods: {
			toPage
		}
	}
</script>

<style lang="scss">
	.item-main {
		border: 1px solid #fff;
		padding-bottom: 36rpx;
		background-color: #ffffff;
		margin: 20rpx 28rpx 40rpx;
		border-radius: 20rpx;
		padding: 0rpx 24rpx 0rpx 28rpx;

		.item-top {
			// margin: 0rpx 24rpx 0rpx 28rpx;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 86rpx;

			.left {
				font-size: 30rpx;
				font-weight: 400;
				width: 100%;
				color: rgba(56, 56, 56, 1);
			}

			
		}

		.item-center {
			display: flex;
			justify-content: space-between;
			margin-top: 36rpx;
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);

			.acea-row {
				display: flex;
				align-items: center;

				.item-img {
					width: 170rpx;
					height: 144rpx;
					border-radius: 10rpx;
					margin-right: 18rpx;
				}

				.content-main {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 20px;
					color: rgba(128, 128, 128, 1);

					p {
						margin: 0;
						padding: 0;
					}
				}
			}

			span {
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}
		}

		.item-bottom {
			p {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(166, 166, 166, 1);
			}

			.bottom-btn {
				padding-bottom: 36rpx;
				margin-top: 18rpx;
				display: flex;
				justify-content: space-between;

				span {
					font-size: 24rpx;
					color: rgba(128, 128, 128, 1);
					width: 90rpx;
					line-height: 44rpx;
					border-radius: 4rpx;
					border: 2rpx solid rgba(229, 229, 229, 1);
					display: flex;
					justify-content: center;
				}
			}
		}
	}

	::v-deep .u-modal__content {
		padding: 30rpx 70rpx !important;
	}

	.chooseBox {
		width: 100%;
		padding: 20rpx 60rpx;
	}

	.rt {
		margin-left: 20rpx;
	}
	.main-content {
		padding: 0 30rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 28rpx 28rpx 28rpx;
	
		.main-tittle {
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			padding: 24rpx 0 18rpx 0;
	
			.tittle-left {
				font-size: 30rpx;
	
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
			}
	
			.tittle-right {
				// width: 100%;
				line-height: 44rpx;
				height: 44rpx;
				border-radius: 10rpx;
				background: rgba(238, 33, 45, 1);
				font-size: 24rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
	
		.mian-center {
			padding: 14rpx 0 20rpx 0;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
	
			.center-left {
				p {
					font-size: 24rpx;
					line-height: 40rpx;
					color: rgba(128, 128, 128, 1);
				}
			}
	
			.center-right {
				font-size: 24rpx;
				color: rgba(238, 33, 45, 1);
			}
		}
	
		.main-bottom {
			margin-top: 28rpx;
	
			.bottom-btn {
				width: 90rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				color: rgba(128, 128, 128, 1);
				border-radius: 4rpx;
				border: 2rpx solid rgba(229, 229, 229, 1);
				margin-bottom: 32rpx;
			}
		}
	}
	
</style>